<template>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    v-model:selectedKeys="selectedKeys2"
                    v-model:openKeys="openKeys"
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
            >
                <a-sub-menu key="sub1">
                    <template #title>
              <span>
                <user-outlined />
                商家管理
              </span>
                    </template>
                    <a-menu-item key="1">option1</a-menu-item>
                    <a-menu-item key="2">option2</a-menu-item>
                    <a-menu-item key="3">option3</a-menu-item>
                    <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                    <template #title>
              <span>
                <laptop-outlined />
                商品管理
              </span>
                    </template>
                    <a-menu-item key="/admin/manager">
                        <router-link to="/admin/manager">品牌管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/specification">
                        <router-link to="/admin/specification">规格管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/typetemlate">
                        <router-link to="/admin/typetemlate">模板管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/item">
                        <router-link to="/admin/item">分类管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="9">
                        商品审核
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                    <template #title>
              <span>
                <notification-outlined />
                广告管理
              </span>
                    </template>
                    <a-menu-item key="/admin/contentcate">
                        <router-link to="/admin/contentcate">广告类别</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/content">
                        <router-link to="/admin/content">广告内容</router-link>
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout-content
                :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
            <a-breadcrumb>
                <a-breadcrumb-item href="#" @click="breadcrumbQuery(1,{id:0})">顶级分类列表</a-breadcrumb-item>
                <a-breadcrumb-item href="#" @click="breadcrumbQuery(2,entity_1)">{{entity_1.name}}</a-breadcrumb-item>
                <a-breadcrumb-item href="#" @click="breadcrumbQuery(3,entity_1)">{{entity_2.name}}</a-breadcrumb-item>
            </a-breadcrumb>
            <a-table :dataSource="categoryList"
                     :columns="columns"
                     :row-key="record=>record.id"
                     :loading="loading">

                <template v-slot:action="{text,record}">
                    <a-button type="primary" v-if="grade!=3"  @click="handleQueryCategory(record)">
                        查询下级
                    </a-button>
                </template>
            </a-table>
        </a-layout-content>
    </a-layout>
</template>


<script lang="ts">
    import {defineComponent, onMounted, ref} from "vue";
    import axios from "axios";
    import {message} from "ant-design-vue";

    export default defineComponent({
        name: "Item",
        setup(){
            const categoryList=ref();
            const loading =ref<boolean>(false);
            const grade =ref<number>(0);
            const entity_1 =ref({});
            const entity_2 =ref({});
            const entity_3 =ref({});
            const pagination=ref({
                current:1,
                pageSize:4,
                total:0,
            });
            const columns= [
                {
                    title: '分类id',
                    dataIndex: 'id',
                },
                {
                    title: '分类名称',
                    dataIndex: 'name',
                },
                {
                    title: '类型模板ID',
                    dataIndex: 'typeId',
                },
                {
                    title: 'Action',
                    key: 'action',
                    slots: {customRender:'action'}
                },

            ];
            const breadcrumbQuery=(gid:number,category:any)=>{
                grade.value = gid;

                if(grade.value == 1){
                    entity_1.value = {};
                    entity_2.value = {};
                }
                if(grade.value == 2){
                    entity_1.value = category;
                    entity_2.value = {};
                }
                if(grade.value == 3){
                    entity_2.value = category;
                }

                loading.value = true;
                axios.get('http://localhost:8899/brand-query/itemCat-ms/findByParentId?parentId='+category.id).then((response)=>{
                    categoryList.value = response.data;
                    loading.value = false;
                });
            };
            const handleQueryCategory=(category:any)=>{
                grade.value = grade.value+1;

                if(grade.value == 1){
                    entity_1.value = {};
                    entity_2.value = {};
                }
                if(grade.value == 2){
                    entity_1.value = category;
                    entity_2.value = {};
                }
                if(grade.value == 3){
                    entity_2.value = category;
                }

                loading.value = true;
                axios.get('http://localhost:8899/brand-query/itemCat-ms/findAll').then((response)=>{
                    categoryList.value = response.data;
                    loading.value = false;
                });
            };
            onMounted(()=>{
                handleQueryCategory({id:0})
            });
            return{
                categoryList,
                loading,
                grade,
                entity_1,
                entity_2,
                entity_3,
                pagination,
                columns,
                breadcrumbQuery,
                handleQueryCategory,
            }
        }
    })
</script>

<style scoped>

</style>